<template>
  <div>
    <!--
    border设置表边框属性
    data引用tableData中的数据
    width: 100%设置表格占满浏览器（最后一列不是设置宽度，保持浏览器美观）
    prop:name字段此列表使用tableData中的数据的字段值
    label列头名称
    width此列的宽
    -->
    <el-table border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <!--pagination带有背景色的分页--layout布局-->
    <el-pagination
      background
      align="right"
      layout="prev, pager, next"
      :total="totals"
      :page-size=pageSize
      :current-page=currentPage
      @current-change="gotoPage">
    </el-pagination>
  </div>
</template>

<script>
/*script中引入Axios*/
import axios from "axios";
export default {
  name: 'MyTable',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      totals:1000,
      pageSize:5,
      currentPage:1
    }
  },
  methods:{
    gotoPage(curr){
      // curr 就是当前已经点击的页码
      console.log(curr)
      this.currentPage = curr
      this.findPage()
    },
    // 请求后端接口 获取列表数据的方法
    findPage(){
      let para = {"pageSize":this.pageSize,"currentPage": this.currentPage}
    }
  },
  mounted() {
    // 页面第一次初始化的时候 去请求接口
    this.findPage();
  }
}
</script>

